<template >
    <div class="menu">
        <el-container>
            <el-header>
                <div class="img"> <img src="../assets/logo.png" alt=""></div>
                <div class="text">千岩奉行管理后台</div>
                <el-button type="info" @click="logout">退出</el-button>
            </el-header>
            <el-container>
                <el-aside :width="isedit ?'60px':'200px'">
                    <el-menu class="el-menu-vertical-demo" background-color="#333744" text-color="#fff"
                        active-text-color="#3353bb" unique-opened router :collapse="isedit" :default-active="activepath" >
                        <el-menu-item v-show="isedit" @click="isedit = !isedit"><i class="el-icon-s-fold"></i>
                        </el-menu-item>
                        <el-menu-item v-show="!isedit" @click="isedit = !isedit"><i class="el-icon-s-unfold"></i>
                        </el-menu-item>
                        <el-submenu :index="item.path" v-for="item,index in menu" :key="index">
                            <template slot="title">
                                <!-- <i class="el-icon-location"></i> -->
                                <i :class="icon[item.id]"></i>
                                <span style="margin-left:10px" > {{item.authName}}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="it,ind in item.children" :key="ind" :index="'/'+it.path">
                                    <span class="el-menu-res">
                                        <i :class="chicon[it.id]"></i> 
                                        <span style="margin-left:10px">{{it.authName}}</span>
                                    </span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menu: [],
            isedit: true,
            icon: {
                125: 'iconfont icon-yonghutianchong',
                103: 'iconfont icon-quanxian_power',
                101: 'iconfont icon-shangpin  ',
                102: 'iconfont icon-quanxian',
                
                145: 'iconfont icon-tongji',
            },
            chicon:{
                110:'iconfont icon-yonghu_user',
                111:'iconfont icon-quanxian_power',
                112:'iconfont icon-quanxian',
                104:'iconfont icon-liebiao_list',
                115:'iconfont icon-shangpincanshu',
                121:'iconfont icon-01_shangpinfenlei',
                107:'iconfont icon-liebiao',
                146:'iconfont icon-anquan_security',
            }
        };

    },
    created() {
        this.getmenu();
    },
    computed:{
        activepath(){
            return this.$route.meta.parentPath ? this.$route.meta.parentPath : this.$route.path
        }
    },
    methods: {
        logout() {
            localStorage.removeItem("token");
            this.$router.push("/");
        },
        async getmenu() {
            var res = await this.axios({
                url: "/v1/menus",
            });
            console.log(res);
            this.menu = res.data.data;
        }
    },

}
</script>
<style >
.menu {
    width: 100%;
    height: 100%;
}

.el-container {
    width: 100%;
    height: 100%;
}

.el-header {
    width: 100%;
    background-color: #373f41;
    color: rgb(255, 255, 255);
    text-align: left;
    line-height: 60px;
    display: flex;
    position: relative;
}

.el-header .img {
    width: 60px;
    height: 60px;
    
   
}

.img img {
    width: 100%;
    height: 100%;
   
}

.el-header .text {
    display: inline-block;
    width: 300px;
    height: 60px;
    line-height: 60px;
    font-size: 28px;
}

.el-header .el-button {
    position: absolute;
    top: 10px;
    right: 15px;
}

.el-aside {
    background-color: #333744;
    color: #333;
    text-align: center;
    line-height: 200px;
    overflow: hidden;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
.el-menu-item-group{
    margin-left: 15px;
    border: none;
    
}
</style>